<template>
  <div>
    <!--<index-link to="/home">go to home</index-link>-->
    <div class="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><router-link to="/home">Home</router-link></li>
        <li class="breadcrumb-item"><router-link to="/product">Product</router-link></li>
      </ol>
    </div>
    <!--在此处，有个问题，vue是数据驱动型的，假如我当前页只需要展示15条数据。请问，此处的dom如何通过v-for来写-->
    <div class="d-lg-flex justify-content-around">
      <div class="w-100 text-center display_blank d-flex justify-content-center align-items-center">
        <!--此段内容，仿制网易严选，用vue实现，原理利用v-bind属性，动态置换src路径，体现vue强大的数据驱动-->
        <div class="content-width" @mouseenter="show_img1 = !show_img1" @mouseleave="show_img1 = !show_img1">
          <div class="position-relative"
               style="height: 300px;">
            <transition-group :duration="{enter: 1000, leave: 1000}"
                              enter-active-class="animated fadeIn"
                              leave-active-class="animated fadeOut"
                              name="fade"
                              mode="out-in">
              <img class="position-absolute"
                   style="left: 0;"
                   key="img_01"
                   v-show="show_img1"
                   src="../../static/picture/WYcolor.png"
                   alt="down">
              <img key="img_02"
                   style="left: 0;"
                   v-show="!show_img1"
                   class="position-absolute" src="../../static/picture/wave-1.png" alt="up">
            </transition-group>
          </div>
          <h3>Title1</h3>
          <p>Content1</p>
          <div>Footer1</div>
        </div>
      </div>
      <div class="w-100 text-center display_blank d-flex justify-content-center align-items-center">
        <div class="content-width" @mouseenter="show_img2 = !show_img2" @mouseleave="show_img2 = !show_img2">
          <div class="position-relative"
               style="height: 300px;">
            <transition-group :duration="{enter: 1000, leave: 1000}"
                              enter-active-class="animated fadeIn"
                              leave-active-class="animated fadeOut"
                              name="fade"
                              mode="out-in">
              <img class="position-absolute"
                   style="left: 0;"
                   key="img_01"
                   v-show="show_img2"
                   src="../../static/picture/dark-1.png"
                   alt="down">
              <img key="img_02"
                   style="left: 0;"
                   v-show="!show_img2"
                   class="position-absolute" src="../../static/picture/wave-1.png" alt="up">
            </transition-group>
          </div>
          <h3>Title2</h3>
          <p>Content2</p>
          <div>Footer2</div>
        </div>
      </div>
      <div class="w-100 text-center display_blank d-flex justify-content-center align-items-center">
        <div class="content-width" @mouseenter="show_img3 = !show_img3" @mouseleave="show_img3 = !show_img3">
          <div class="position-relative"
               style="height: 300px;">
            <transition-group :duration="{enter: 1000, leave: 1000}"
                              enter-active-class="animated fadeIn"
                              leave-active-class="animated fadeOut"
                              name="fade"
                              mode="out-in">
              <img class="position-absolute"
                   style="left: 0;"
                   key="img_01"
                   v-show="show_img3"
                   src="../../static/picture/wave-1.png"
                   alt="down">
              <img key="img_02"
                   style="left: 0;"
                   v-show="!show_img3"
                   class="position-absolute" src="../../static/picture/WYcolor.png" alt="up">
            </transition-group>
          </div>
          <!--<img v-bind:src="src3" alt="product-03">-->
          <h3>Title3</h3>
          <p>Content3</p>
          <div>Footer3</div>
        </div>
      </div>
    </div>
    <!--<button class="mt-3" @click="add">Click me to add</button>-->
    <!--<P>{{ this.$store.state.moduleA.count }}</P>-->
    <!--<button @click="_sum">Click me to sum</button>-->
    <!--<P>{{ this.$store.state.moduleA.sum }}</P>-->
    <!--<button type="button" class="btn btn-primary btn-person-set" @click="showIt = !showIt">Show</button>-->
    <div class="d-flex justify-content-center my-3">
      <div style="width: 300px; height: 300px; overflow:hidden;">
        <img @mouseenter="imgBigger"
             @mouseleave="imgSmaller"
             src="../../static/picture/WYcolor.png" alt="ts-01">
      </div>
    </div>
    <!--实际上此段代码可以用vue的mixin来写，变成公共组件，降低代码量，显得更简洁。或者也可以考虑sass和less的mixin-->
    <div class="d-flex justify-content-center">
      <div class="position-relative"
           @mouseenter="beInUp = !beInUp"
           @mouseleave="beInUp = !beInUp"
           style="height: 300px; left: -150px;">
        <transition-group :duration="{enter: 1000, leave: 1000}"
                          enter-active-class="animated fadeIn"
                          leave-active-class="animated fadeOut"
                          name="fade"
                          mode="out-in">
          <img class="position-absolute"
               key="img_01"
               v-show="beInUp"
               src="../../static/picture/wave-1.png"
               alt="down">
          <img key="img_02"
               v-show="!beInUp"
               class="position-absolute" src="../../static/picture/WYcolor.png" alt="up">
        </transition-group>
      </div>
    </div>
    <div class="d-flex justify-content-center my-2">
      <div class="position-relative"
           @mouseenter="show_img4 = !show_img4"
           @mouseleave="show_img4 = !show_img4"
           style="height: 300px; left: -150px;">
        <transition-group :duration="{enter: 1000, leave: 1000}"
                          enter-active-class="animated fadeInLeft"
                          leave-active-class="animated fadeOutRight"
                          name="fade"
                          mode="out-in">
          <img class="position-absolute"
               key="img_01"
               v-show="show_img4"
               src="../../static/picture/dark-1.png"
               alt="down">
          <img key="img_02"
               v-show="!show_img4"
               class="position-absolute" src="../../static/picture/WYcolor.png" alt="up">
        </transition-group>
      </div>
    </div>
    <p class="text-muted my-2 text-center">我们是有底线的。</p>
    <footer class="display-md-4 mt-md-2 p-md-3 text-center bg-dark text-light">
      &copy;2017-2019 Shenzhen Social University
    </footer>
  </div>
</template>

<script>
import API from '../util/api/api'
import { mapActions, mapMutations } from 'vuex'
import MutationType from '../vuex/mutation_type'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Happy to see you again!',
      show_img1: true,
      show_img2: true,
      show_img3: true,
      show_img4: true,
      beInUp: true
    }
  },
  methods: {
    ...mapActions({
      add: 'calculate'
    }),
    ...mapMutations([MutationType.SUM]),
    _sum: function () {
      this.$store.commit(MutationType.SUM)
    },
    imgBigger: function (el) {
      el.target.classList.remove('scale-img-reverse')
      el.target.classList.add('scale-img')
    },
    imgSmaller: function (el) {
      el.target.classList.remove('scale-img')
      el.target.classList.add('scale-img-reverse')
    }
  },
  created: function () {
    this.$http.get(API.PROD_LIST).then(res => {
      // console.log(res)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @media (max-width: 991.98px) {
    .display_blank{
      margin-bottom: 0.25rem;
    }
  }
  .content-width{
    width: 300px;
    background-color: rgba(178,145,255,0.2);
  }
  .content-width:hover{
    background-color: rgba(96,255,95,0.19);
    cursor: pointer;
    box-shadow: 3px 0 5px 2px silver;
  }
  .scale-img{
    transform: scale(1.1);
    transition: all ease-in 0.5s;
  }
  .scale-img-reverse{
    transform: scale(1);
    transition: all ease-out 0.5s;
  }
  /*@keyframes anyone-animation {*/
    /*0%{*/
      /*transform: scale(1);*/
    /*}*/
    /*100%{*/
      /*transform: scale(1.1);*/
    /*}*/
  /*}*/
</style>
